<!DOCTYPE html>
<html lang="en"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <title>登录页面</title>
    <link rel="stylesheet" th:href="@{/plugins/easyui/themes/default/easyui.css}" />
    <link rel="stylesheet" th:href="@{/plugins/easyui/themes/icon.css}" />

    <style>
        #login{
            padding:6px 0 0 0;
        }
        p{
            height: 22px;
            line-height: 22px;
            padding:4px 0 0 25px;
        }
        .textbox{
            height: 22px;
            padding:0 2px;
        }
        .easyui-linkbutton{
            padding: 0 10px;
        }
        #btn {
            text-align: center;
        }
    </style>

</head>
<body>
<form id="login">
    <p>
        账号: <input class="textbox" type="text" name="username" data-options=" prompt:'用户名'"></input>
    </p>
    <p>
        密码: <input class="textbox" type="password" name="password" data-options="prompt:'密码'"></input>
    </p>
    <!--<p>
        <img id="codeImg" src="http://localhost:8083/captcha" class="img-responsive" style="display: block;width:100%;height: 32px">
    </p>-->
</form>
<div id="btn">
    <a href="javascript:void(0)" name="savebtn" class="easyui-linkbutton">保存</a>
    <a href="javascript:void(0)" name="rstbtn" class="easyui-linkbutton">重置</a>
</div>


<script th:src="@{/plugins/easyui/jquery.min.js}"></script>
<script th:src="@{/plugins/easyui/locale/easyui-lang-zh_CN.js}"></script>
<script th:src="@{/plugins/easyui/jquery.easyui.min.js}"></script>
<script>
    $(function () {
        $("#login").dialog({
            title: '&nbsp;登录表单',
            width: 300,
            height: 280,
            modal: true,
            iconCls: 'icon-login',
            buttons: '#btn'
        });

        $("a[name='savebtn']").click(function () {
            var postData = $('form').serialize();
            $.post('/authentication/form', postData, function (data) {
                if(data.flag){
                    //  window.location = '/';
                }else {
                    $.messager.show({
                        title: '',
                        msg: '<span style=" color: red;">'+data.msg+'</span>',
                        timeout: 2000,
                        showType:'show'
                    });
                    $("input[name='password']").val('');
                }
            });
        });

        $("a[name='rstbtn']").click(function () {
            $('form')[0].reset();
        });
    });
</script>
</body>
</html>